<template>
  <el-container>
    <el-header>
      <p>日志详情</p>
    </el-header>
    <el-main>
      <el-row class="btn-group">
        <el-button class="btn"
                   @click="handleDownloadLotFee"><span>导出</span><i class="el-icon-download"></i>
        </el-button>
      </el-row>
      <el-table :data="dataList" v-loading="listLoading" element-loading-text="给我一点时间"
                highlight-current-row stripe
                style="width: 100%" ref="lotFeeTable" @selection-change="handleSelectChangeLotFee">
        <el-table-column fixed sortable align="center" label="诱导屏id"  prop="park_name">
          <template slot-scope="scope">
            <span>{{scope.row.park_name}}</span>
          </template>
        </el-table-column>
        <el-table-column   align="center" label="诱导屏名称"  sortable prop="orgname">
          <template slot-scope="scope">
            <span>{{scope.row.orgname}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="发布内容"  sortable prop="wxsum">
          <template slot-scope="scope">
            <span>{{scope.row.wxsum}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="发布时间"  sortable prop="wxmoney">
          <template slot-scope="scope">
            <span>{{scope.row.wxmoney}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="反馈信息"  sortable prop="wxbjsum">
          <template slot-scope="scope">
            <span>{{scope.row.wxbjsum}}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination background @size-change="handleSizeChangeLotFee" @current-change="handleCurrentChangeLotFee"
                     :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-footer>
  </el-container>
</template>

<script>
  /* eslint-disable */
  import ElContainer from "element-ui/packages/container/src/main";
  import ElFooter from "element-ui/packages/footer/src/main";

  export default {
    components: {
      ElFooter,
      ElContainer},
    name: "lot-fee-table",
    props:['searchList','listLoadingLotFee'],
    watch:{
      searchList(val){
        this.dataList=val.list
        this.total=val.count
      },
      listLoadingLotFee(val){
        this.listLoading=val
      }
    },
    data() {
      return {
        listLoading: false,
        downloadLoading: false,
        dataList: null,
        selectList: [],
        total: 0,
        listQuery: {
          page: 1,
          limit: 20
        }
      }
    },
    methods: {
      handleDownloadLotFee() {
        if (this.selectList.length) {
          this.downloadLoading = true
          import('@/vendor/Export2Excel').then(excel => {
            const tHeader = ['单位编号', '微信扫码出场交易数', '微信扫码出场金额', '微信扫码补缴交易数', '微信扫码补缴金额',
              '支付宝扫码出场交易数','支付宝扫码出场金额','支付宝扫码补缴交易数','支付宝扫码补缴金额','微信公众号交易数','微信公众号金额',
              '支付宝服务窗交易数', '支付宝服务窗金额', 'APP微信交易数', 'APP微信金额', 'APP支付宝交易数',
              'APP支付宝金额', '电子支付总笔数', '电子支付总金额', '应收', '应收占比']
            const filterVal = ['orgname', 'wxsum', 'wxmoney','wxbjsum', 'wxbjmoney', 'zfbsum','zfbmoney', 'zfbbjsum', 'zfbbjmoney',
              'gzhsum', 'gzhmoney', 'fwcsum','fwcmoney', 'appwxsum', 'appwxmoney','appzfbsum', 'appzfbmoney', 'epaysum','epaymoney','should','shouldrate']
            const list = this.selectList
            const data = this.formatJson(filterVal, list)
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: '电子支付统计'
            })
            this.$refs.lotFeeTable.clearSelection()
            this.downloadLoading = false
          })
        } else {
          this.$message({
            showClose: true,
            message: '至少选择一条',
            duration:2000,
            type: 'warning'
          })
        }

      },
      handleSelectChangeLotFee(val) {
        this.selectList = val
      },
      handleSizeChangeLotFee(val) {
        this.listQuery.limit = val
        this.$emit("handleSizeChangeLotFee",val)
      },
      handleCurrentChangeLotFee(val) {
        this.listQuery.page = val
        this.$emit("handleCurrentChangeLotFee",val)
      },

      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      }
    }
  }
</script>


<style scoped>
  .btn-group > .el-button span{
    display: none;
  }
  .btn-group > .el-button:hover{
    background-color: #409EFF;
  }
  .btn-group > .el-button:hover span{
    display: block;
  }
  .btn-group > .el-button:hover i{
    display: none;
  }
</style>
